<!DOCTYPE html>
<html>
<head>
    <title>radar</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <script type="text/javascript" src="../src/JChart.js"></script>
    <script type="text/javascript" src="../src/JChart.Canvas.js"></script>
    <script type="text/javascript" src="../src/JChart.Chart.js"></script>
    <script type="text/javascript" src="../src/JChart.Scale.js"></script>
    <script type="text/javascript" src="../src/JChart.Radar.js"></script>
</head>
<body>
<canvas id="canvas1" height="600" width="600"></canvas>
<script type="text/javascript">
    var data = {
	labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
	datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				pointColor : "rgba(151,187,205,1)",
				pointStrokeColor : "#fff",
				data : [28,48,40,19,96,27,100]
			}
		]
	}
    var radar = new JChart.Radar(data,{
        id : 'canvas1'
    });
    radar.on('tap.point',function(data){
        alert(data);
    });
    radar.draw();
</script>
</body>
</html>